<template>
  <view class="payment-page">
    <!-- 返回按钮 -->
    <view class="back-button" @click="goBack">
      <image src="/static/back.png" mode="widthFix"></image>
    </view>

    <!-- 标题 -->
    <view class="title">支付</view>

    <!-- 倒计时提示 -->
    <view class="countdown-tip" v-if="totalSeconds > 0">
      请在{{ formattedCountdown }}之内完成支付，超时订单自动取消
    </view>

    <!-- 订单信息 -->
    <view class="order-info">
      <view class="hospital-name">
        <image src="/static/hospital-logo.png" mode="widthFix"></image>
        山西省中医院
      </view>
      <view class="order-details">
        支付信息：共1件商品 入职体检(45岁以下男女...)
        <text style="color: #ff6060;">支付费用：¥371.00</text>
      </view>
    </view>

    <!-- 支付方式选择 -->
    <view class="payment-methods">
      <view
        class="method-item"
        v-for="method in paymentMethods"
        :key="method"
        @click="selectPaymentMethod(method)"
      >
        <image :src="`/static/${method.toLowerCase()}.png`" mode="widthFix"></image>
        <text>{{ method }}</text>
        <view class="check-mark" v-if="selectedMethod === method">
          <image src="/static//img/BodycheckImage/weixin.jpg" mode="widthFix"></image>
        </view>
      </view>
    </view>

    <!-- 立即支付按钮 -->
    <view class="pay-button" @click="payNow">
      立即支付 ¥371
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      totalSeconds: 29 * 60 + 54, // 29分54秒转换为秒
      intervalId: null,
      selectedMethod: '微信',
      paymentMethods: ['微信', '支付宝'], // 定义支付方式数组
    };
  },
  onLoad() {
    this.startCountdown();
  },
  onUnload() {
    this.clearCountdown();
  },
  computed: {
    formattedCountdown() {
      const minutes = Math.floor(this.totalSeconds / 60);
      const seconds = this.totalSeconds % 60;
      return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
    }
  },
  methods: {
    startCountdown() {
      this.intervalId = setInterval(() => {
        if (this.totalSeconds > 0) {
          this.totalSeconds--;
        } else {
          this.onTimeout();
        }
      }, 1000); // 每秒减少一次
    },
    clearCountdown() {
      if (this.intervalId) {
        clearInterval(this.intervalId);
        this.intervalId = null;
      }
    },
    onTimeout() {
      this.clearCountdown();
      uni.showToast({
        title: '订单已超时，请重新下单。',
        icon: 'none',
        duration: 2000
      });
      // 这里可以加入更多逻辑，例如跳转到首页或者刷新订单状态
    },
    selectPaymentMethod(method) {
      this.selectedMethod = method;
    },
    payNow() {
      uni.showModal({
        title: '提示',
        content: `确定要使用${this.selectedMethod}支付吗？`,
        success: (res) => {
          if (res.confirm) {
            // 执行支付操作，比如调用API等
            uni.showToast({
              title: '支付成功',
              icon: 'success',
              duration: 2000
            });
            // 支付成功后的逻辑，例如返回上一页
          }
        }
      });
    },
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>
<style scoped>
.payment-page {
  background-color: #f8f8f8;
  padding: 20px;
  font-family: Arial, sans-serif;
}

.back-button {
  position: absolute;
  top: 20px;
  left: 20px;
}

.title {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}

.countdown-tip {
  background-color: #ffe9d9;
  padding: 10px;
  text-align: center;
  color: #ff6060;
  margin-bottom: 20px;
}

.order-info {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
}

.hospital-name {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.order-details {
  color: #666;
}

.payment-methods {
  background-color: #ffffff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
}

.method-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 10px 15px;
  border-bottom: 1px solid #e0e0e0;
}

.method-item:last-child {
  border-bottom: none;
}

.method-item image {
  width: 24px;
  height: 24px;
  margin-right: 10px;
}

.check-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-left: auto;
}

.check-mark image {
  width: 16px;
  height: 16px;
}

.pay-button {
  background-color: #2979ff;
  color: #ffffff;
  text-align: center;
  padding: 15px;
  border-radius: 25px;
  margin-top: 50px;
}
</style>